<script type="text/javascript">
  $().ready(function() {
    remove_cat();
    $("#sel_category_form").validate({
      rules: {
        "category_id": {
          required: true
        }
      },
      messages:{
        "category_id": {
          required: "点击下面链接,选择课程分类."
        }
      },
      errorPlacement: function(error, element) {
        $("#message_box").show();
      }
    });
  });
  function  append_node_data(node_id,text){
    $("#select_cat").show();
    $("#message_box").hide();
    var inner_html = "<span>"+text+"</span>"
    $("#inner_html").html(inner_html);
    $("#category_id")[0].setAttribute("value", node_id);
  }

  function  remove_cat(){
    $("#select_cat").hide();
    $("#category_id")[0].setAttribute("value", "");
  }
</script>
<div id="category_body">
  <div class="sub_pannel">
    <div class="content">
      <div class="top_title">
        <h6>创建新课程 步骤一</h6>
      </div>
      <h5 style="color:#9B9EA0">选择课程分类</h5>
      <div id="message_box">
        <div class="hint_message">点击下面链接,选择课程分类.</div>
      </div>
      <%form_tag  new_course_path ,:id=>'sel_category_form' do%>
        <%=hidden_field_tag :category_id%>
        <dl>
          <%@root_nodes.each do |root|%>
            <dt><h6><%= root.name %></h6></dt>
            <dd><%=display_children(root.direct_children) %></dd>
          <%end%>
        </dl>
        <div id="select_cat">
          <span class="close_x" onclick="remove_cat()">x</span>
          <p>你要创建的课程分类:</p>
          <div id="inner_html"></div>
        </div>
        <div class="p_submit">
          <%=submit_tag "下一步" ,:class=>"submit"%>
        </div>
      <%end%>
    </div>
  </div>
</div>